<script setup>

import { renderContent } from '@/utils/unit.js'
defineProps({
  content: {
    type: String,
    default: ''
  },
  timeoutDays: {
    type: Number,
    default: 0
  },
  atOrgObj: {
    type: Array,
    default: () => []
  },
  textHidden: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <div
    class="text-14px leading-20px m-0"
    :class="textHidden ? 'multi-line-ellipsis' : ''"
    v-html="
      renderContent(content || '', [
        {
          type: '$_CONTENT_HOLDER_DAYS_$',
          data: [
            {
              name: timeoutDays || '',
              color: 'primary'
            }
          ]
        },
        {
          type: '$_CONTENT_HOLDER_$',
          data: (atOrgObj || []).map((child) => ({
            name: ` @${child.name}`,
            color: 'info'
          }))
        }
      ])
    "
  />
</template>

<style scoped lang="less">
.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>